//打开调试台
document.addEventListener("keydown", function(event) {
    if (event.altKey && event.keyCode === 81) {
        myFunction();
    }
});
function myFunction() {
    // 这里编写需要执行的代码
    console.log('准备打开调试台')
    if (document.getElementsByClassName('mainPerspective-div')[0].style.display ==='none') {
        document.getElementsByClassName('mainPerspective-div')[0].style.display = 'block'
    }else {
        document.getElementsByClassName('mainPerspective-div')[0].style.display = 'none'
    }

}


/**
 * 调试-生成楼层剖切json数据
 * 描述：通过点击想要剖切的位置生成对应的楼层号及剖切数据
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
// 存储在调试的时候记录的剖切数据
let debugSlicingArr = []
// 存储实体与数据信息
let debugSlicingData = new Map()
const getSectionPosition = () =>{
    addDivBox()
    // 添加操作
    document.getElementById('floor-operate').innerHTML = '<button onclick="saveDebugSicingData()">保存</button><button onclick="exitDebugSicingData()">关闭</button>'
    // 编写逻辑
    let labelEntitiesIndex = 0
    let floor = document.getElementById('floor-number-ul')
    handler.setInputAction(function (click) { //cartesian坐标转换为经纬度信息
        let positions = positionAssembly(click.position)
        let height = getModelClickHeight(click.position)
        console.log('查看地址：', positions)
        // 创建实体
        let entitie = viewer.entities.add({
            position: positions,
            label: {
                text: labelEntitiesIndex + 'F',
                font: '20px sans-serif',
                fillColor: Cesium.Color.WHITE,
                outlineWidth: 2,
                backgroundColor: Cesium.Color.BLACK,
                showBackground: true,
                style: Cesium.LabelStyle.FILL,
                // 调整绘制高度
                // pixelOffset: new Cesium.Cartesian2(60, -60),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance: Number.POSITIVE_INFINITY
            }
        })
        debugSlicingData.set(labelEntitiesIndex + 'F', {position:positions, entitie:entitie})
        debugSlicingArr.push({position:positions,height:height, floorName: labelEntitiesIndex + 'F'})
        floor.innerHTML += `<li class="floor-ul-li"><div class="floor-ul-li-div" contenteditable="true">${labelEntitiesIndex + 'F'}</div><input class="floor-ul-li-input" type="number" value='${height}'><img class="floor-ul-li-img" title="${labelEntitiesIndex + 'F'}" src="https://img0.baidu.com/it/u=1147878608,421029790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></li>`
        // 创建楼层标签
        labelEntitiesIndex ++
        console.error('查看你楼层信息：', debugSlicingArr)
        // 创建标签点击事件
        var layerSettings = document.getElementsByClassName("floor-ul-li-img");
        var input = document.getElementsByClassName("floor-ul-li-input");
        let text = document.getElementsByClassName('floor-ul-li-div')
        for(let i=0;i<layerSettings.length;i++){
            layerSettings[i].setAttribute("index",i);
            layerSettings[i].onclick = function (){
                console.log('查看输入框内部的数据：', input[i].value)
                // 将数据传入剖切方法中
                let sectionData = debugSlicingData.get(layerSettings[i].title)
                // 修改map中存储的数据
                if (input[i].value !== sectionData.position.z){
                    // 修改实体信息
                    sectionData.entitie.position = Cesium.Cartesian3.fromDegrees(sectionData.position.x, sectionData.position.y, input[i].value)
                    sectionData.entitie.label.text = text[i].textContent
                    let data = {
                        position:{x:sectionData.position.x, y:sectionData.position.y, z:input[i].value},
                        entitie: sectionData.entitie
                    }
                    let arr = {
                        position:{x:sectionData.position.x, y:sectionData.position.y, z:input[i].value},
                        height:input[i].value,
                        floorName: sectionData.entitie.label.text._value
                    }
                    debugSlicingData.set(layerSettings[i].title, data)
                    debugSlicingArr[i] = arr
                }
                // 进行剖切
                //cutAccordingToParameters(debugSlicingData.get(layerSettings[i].title).position)
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}


/**
 * 调试-生成楼层剖切json数据
 * 描述：根据经纬度获取模型离地高度
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
function getModelClickHeight(position){
    let MouseHeight = 0
//获取相机射线
    ray = viewer.scene.camera.getPickRay(position);
//根据射线和场景求出在球面中的笛卡尔坐标
    position1 = viewer.scene.globe.pick(ray,viewer.scene);
//获取该浏览器坐标的顶部数据
    feature = viewer.scene.pick(position);
// console.log(feature);
    if (feature == undefined && position1) {
        cartographic1 = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position1);
        lon = Cesium.Math.toDegrees(cartographic1.longitude);
        lat = Cesium.Math.toDegrees(cartographic1.latitude);
        MouseHeight = 0;
    }
    else{
        let cartesian = viewer.scene.pickPosition(position);
        if (Cesium.defined(cartesian) ){
            //如果对象已定义，将度转为经纬度
            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            lon = Cesium.Math.toDegrees(cartographic.longitude);
            lat = Cesium.Math.toDegrees(cartographic.latitude);
            MouseHeight = cartographic.height;//模型高度
        }
    }
    console.log('模型高度', MouseHeight)
    return MouseHeight
}



/**
 * 调试-生成楼层剖切json数据
 * 描述：将操作中的剖切数据都给保留下来
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
function saveDebugSicingData() {
    console.log('开始保存楼层剖切数据:', debugSlicingArr)
    let saveSicingDataObjcte = {}
    let saveSicingData = {}
    let div = document.getElementsByClassName('floor-ul-li-div')
    if (div){
        for(let i=0;i<div.length;i++){
            let name = div[i].textContent
            console.log(debugSlicingArr[i].floorName, name)
            if (debugSlicingArr[i].floorName !== name){
                debugSlicingArr[i].floorName = name
            }
            saveSicingDataObjcte[debugSlicingArr[i].floorName] = {position:debugSlicingArr[i].position,height:debugSlicingArr[i].height}
        }
        console.log('查看存储数据内容：', saveSicingDataObjcte)
        saveSicingData[window.model_name]= saveSicingDataObjcte
        console.log('查看对象数据：', saveSicingData)
        // 开始json数据保存
        jsonFileStorage(saveSicingData, 'floorSicingData.josn', true)
    }
}
/**
 * 调试-生成楼层剖切json数据
 * 描述：退出json数据获取，关闭弹窗与创建的实体,清除数据
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
function exitDebugSicingData() {
    // 删除标签
    let byId = document.getElementById('floor-data-div-id')
    if (byId){
        byId.remove()
    }
    // 清除数据
    debugSlicingArr = []
    // 删除实体
    if (debugSlicingData.size > 0){
        for (const key of debugSlicingData.keys()) {
            console.log('开始清除标签存储实体：', debugSlicingData.get(key).entitie)
            viewer.entities.remove(debugSlicingData.get(key).entitie)
        }
    }
    closeGetPositionData()
}
/**
 * 调试-图层信息json存储
 * 描述：通过函数获取图层数列表信息
 * 参数：
 * 返回值：图层信息
 * 备注：
 * 功能状态：已完成
 */
const getTilesetsMap = () => {
    let  layerData = viewer.layerManager.getProcessor(2)._path2Tileset
    let saveLayerDataArr = []
    let saveLayerData = {}
    let saveLayerObjcte = {}
    for (const key in layerData) {
        // 当没有数据的时候
        if (saveLayerData[key.split('/')[1]] === undefined){
            // 将数据存储到对象中
            saveLayerData[key.split('/')[1]] = [key.split('/')[2]]
        }else {
            // 累加数据
            saveLayerData[key.split('/')[1]].push(key.split('/')[2])
        }
        console.log(layerData[key])
    }
    // 将数据存储到数组中
    saveLayerDataArr.push(saveLayerData)
    console.log('查看存在的数据：', saveLayerDataArr)
    saveLayerObjcte[window.model_name] = saveLayerDataArr
    // 数据保存
    jsonFileStorage(saveLayerObjcte, 'saveLayerData.josn', true)
    return saveLayerObjcte
}


/**
 * 调试-获取当前视点信息
 * 描述：通过点击获取当前的视点信息，并生成对应的列表，当即保存可以将数据保存为json文件
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
function addViewpoint() {
    // 创建div弹窗
    addDivBox()
    // 添加操作按钮
    document.getElementById('floor-operate').innerHTML = '<button onclick="getViewpoints()">添加</button><button onclick="saveViewpoints()">保存</button><button onclick="exitViewpoints()">关闭</button>'
}

/**
 * 调试-获取当前视点信息
 * 描述：调用方法可以获取到屏幕的视点数据信息，可以与flyTo()连用
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
let viewpointJsonDataStorageMap = new Map()
let getViewIndex = 0
let viewpointJsonDataStorageArr = []
function getViewpoints(){
    console.log('点击拿去数据')
    let camera = getCameraCoordinate()
    viewpointJsonDataStorageArr.push(camera)
    viewpointJsonDataStorageMap.set('视点' + getViewIndex, camera)
    // 添加标签信息
    let floor = document.getElementById('floor-number-ul')
    floor.innerHTML += `<li class="floor-ul-li"><div class="floor-ul-li-div" contenteditable="true">${'视点' + getViewIndex}</div>
<img class="floor-ul-li-img" title="${'视点' + getViewIndex}" src="https://img0.baidu.com/it/u=1147878608,421029790&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
<img class="floor-ul-li-img-delete" title="${'视点' + getViewIndex}" src="https://img1.baidu.com/it/u=3478619132,3544349481&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
<img class="floor-ul-li-img-renew" title="${'视点' + getViewIndex}" src="https://img0.baidu.com/it/u=3339308048,1530259664&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></li>`
    console.log('查看map数据：', viewpointJsonDataStorageMap, getViewIndex)
    getViewIndex ++
    // 创建标签点击事件
    viewpointLabelFunction()
}

/**
 * 调试-获取当前视点信息
 * 描述：标签操作事件，创建的标签的编辑，删除，点击事件
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
function viewpointLabelFunction() {
    var layerSettings = document.getElementsByClassName("floor-ul-li-img");
    let text = document.getElementsByClassName('floor-ul-li-div')
    let deleteTable = document.getElementsByClassName('floor-ul-li-img-delete')
    let li = document.getElementsByClassName('floor-ul-li')
    let renew = document.getElementsByClassName('floor-ul-li-img-renew')
    for(let i=0;i<layerSettings.length;i++){
        layerSettings[i].setAttribute("index",i);
        text[i].setAttribute("index",i);
        li[i].setAttribute("index",i);
        renew[i].setAttribute("index",i);
        // 视点跳转
        layerSettings[i].onclick = function (){
            let viewpoint = viewpointJsonDataStorageMap.get(renew[i].title)
            // 视点飞行
            viewer.camera.flyTo({
                //目标位置 经度，纬度（弧度），高度
                destination: viewpoint.position, //返回的三维点表示的是在 WGS84 椭球体上的位置
                orientation: {
                    heading: viewpoint.heading, // 观察点左右 ，控制飞机航向
                    pitch: viewpoint.pitch, // 远近,上下，俯仰角度
                    roll: viewpoint.roll //翻滚
                },
                duration: 3, // 飞行动画的持续时间（以秒为单位）
                easingFunction: Cesium.EasingFunction.LINEAR_NONE // 线性缓动
            })
        }
        // 删除事件
        deleteTable[i].onclick = function(){
            // 2.删除对应数据
            viewpointJsonDataStorageMap.delete(renew[i].title)
            viewpointJsonDataStorageArr.splice(i, 1)
            // 1.删除标签
            li[i].parentNode.removeChild(li[i])
            viewpointLabelFunction()
        }
        // 更新事件
        renew[i].onclick = function(){
            // 更新对应数据
            let camera = getCameraCoordinate()
            viewpointJsonDataStorageMap.set(renew[i].title, camera)
            viewpointJsonDataStorageArr[i] = camera
        }
    }
}


/**
 * 调试-获取当前视点信息
 * 描述：保存当前视角数据为json文件
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
let viewpointJsonDataStorageObject = {}
function saveViewpoints(){
    let viewpoinObjcet = {}
    // 循环标签数据，获取标签内容与数据
    let viewpoint = document.getElementsByClassName('floor-ul-li-div')
    if (viewpointJsonDataStorageArr.length > 0) {
        for (let i = 0; i < viewpoint.length; i++) {
                viewpoinObjcet[viewpoint[i].textContent] = {camera:viewpointJsonDataStorageArr[i]}
        }
        viewpointJsonDataStorageObject[window.model_name] = viewpoinObjcet
        console.log('查看保存的视点数据：', viewpointJsonDataStorageObject)
        jsonFileStorage(viewpointJsonDataStorageObject, 'viewData.json', true)
    }
}

/**
 * 调试-获取当前视点信息
 * 描述：关闭视点保存弹窗，请清除所有数据
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
function exitViewpoints(){
    // 删除标签
    let byId = document.getElementById('floor-data-div-id')
    if (byId){
        byId.remove()
    }
    viewpointJsonDataStorageObject = {}
    viewpointJsonDataStorageArr = []
    getViewIndex = 0
}

/**
 * 调试-气泡框模拟创建
 * 描述：与获取坐标信息方法连用，可以提前创建号需要的标签，然后在存储到json文件中，做初始化使用
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
const bubbleBoxSimulationCreation = () => {
    recordAddAllEntity = []
    // 创建标签
    // 创建div弹窗
    addDivBox()
    // 添加操作按钮
    document.getElementById('floor-operate').innerHTML = '<button onclick="saveBubblelBox()">保存</button><button onclick="exitBubblelBox()">关闭</button>'
    // 生成气泡框
    let textIndex = 0
    handler.setInputAction(function (click) { //cartesian坐标转换为经纬度信息
        let positions = positionAssembly(click.position)
        let labelName = textIndex + '座单元式办公楼'
        let  error = {
            status: true,// 状态
            number: 10,// 报错数字
            size:10,// 圆圈大小
            textSiz:10// 文字大小
        }
        let text = {
            textArr: [labelName],// 标签内容
            textName: labelName,// 标签文字
            textX:70,// 标签X轴位置
            textY:30,// 标签y轴位置
            textSize:20,// 标签字体大小
            textHeight: 20// 标签字体换行高度
        }
        let  background = {
            backgroundImage: './Source/images/camera/green.png',// 标签背景图片
            height:50,// 标签背景图片高度
            width:300// 标签背景图片宽度
        }
        createCustomBillboards(positions, text, background, error, false)
        // 添加标签信息
        let floor = document.getElementById('floor-number-ul')
        floor.innerHTML += `<li class="floor-ul-li"><div style="width: auto;border-radius: 2px" class="floor-ul-li-div" contenteditable="true">${labelName}</div>
        <input class="floor-ul-li-textX" title="文字X"  style="width: 40px" type="number" value="${text.textX}">
        <input class="floor-ul-li-textY" title="文字Y" style="width: 40px" type="number" value="${text.textY}">
        <input class="floor-ul-li-textSiez" title="文字Siez" style="width: 40px" type="number" value="${text.textSize}">
        <input class="floor-ul-li-textHeight" title="文字height" style="width: 40px" type="number" value="${text.textHeight}">
        <input class="floor-ul-li-background-width" title="背景宽度" style="width: 40px" type="number" value="${background.width}">
        <input class="floor-ul-li-background-height" title="背景高度" style="width: 40px" type="number" value="${background.height}">
        <img class="floor-ul-li-img-delete" title="${labelName}" src="https://img1.baidu.com/it/u=3478619132,3544349481&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
        <img class="floor-ul-li-img-renew" title="${labelName}" src="https://img0.baidu.com/it/u=3339308048,1530259664&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></li>`
        editBubblelBox()
        buildingNameLabelArr.push({position:positions, text:text, background:background, error:error})
        textIndex++
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

}
/**
 * 调试-气泡框模拟创建
 * 描述：气泡框操作，修改，删除，更新
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
// 记录点击的气泡框信息（只是用一次，在最初的数据库整理的时候使用）
let buildingNameLabelArr = []
function editBubblelBox(){
    let text = document.getElementsByClassName('floor-ul-li-div')
    let deleteTable = document.getElementsByClassName('floor-ul-li-img-delete')
    let li = document.getElementsByClassName('floor-ul-li')
    let renew = document.getElementsByClassName('floor-ul-li-img-renew')
    let textX = document.getElementsByClassName('floor-ul-li-textX')
    let textY = document.getElementsByClassName('floor-ul-li-textY')
    let textSiez = document.getElementsByClassName('floor-ul-li-textSiez')
    let textHeight = document.getElementsByClassName('floor-ul-li-textHeight')
    let backgroundWidth = document.getElementsByClassName('floor-ul-li-background-width')
    let backgroundHeight = document.getElementsByClassName('floor-ul-li-background-height')
    console.log('查看高度信息：', backgroundHeight[0].value)
    console.log('backgroundWidth：', backgroundWidth[0].value)
    for (let i = 0; i < li.length; i++) {
        // 删除
        deleteTable[i].onclick = function(){
            // 删除实体
            viewer.entities.remove(recordAddAllEntity[i])
            // 实体数据
            recordAddAllEntity.splice(i, 1)
            // 信息数据
            buildingNameLabelArr.splice(i, 1)
            // 删除标签
            li[i].parentNode.removeChild(li[i])
            editBubblelBox()
        }
        // 更新
        renew[i].onclick = function(){
            // 删除实体
            let element = recordAddAllEntity[i]
            viewer.entities.remove(element)
            // 更新数据
                buildingNameLabelArr[i].text.textArr = [text[i].textContent]// 标签内容
                buildingNameLabelArr[i].text.textName = text[i].textContent// 标签文字
                buildingNameLabelArr[i].text.textX = textX[i].value// 标签X轴位置
                buildingNameLabelArr[i].text.textY = textY[i].value// 标签y轴位置
                buildingNameLabelArr[i].text.textSize = textSiez[i].value// 标签字体大小
                buildingNameLabelArr[i].text.textHeight = textHeight[i].value// 标签字体大小
                buildingNameLabelArr[i].background.height = backgroundHeight[i].value// 标签字体换行高度
                buildingNameLabelArr[i].background.width = backgroundWidth[i].value// 标签字体换行高度
                createCustomBillboards(buildingNameLabelArr[i].position, buildingNameLabelArr[i].text, buildingNameLabelArr[i].background, buildingNameLabelArr[i].error, false)
            // 跟新对应下标的实体
            recordAddAllEntity[i] = recordAddAllEntity[recordAddAllEntity.length -1]
            //删除最后一个实体
            recordAddAllEntity.splice(recordAddAllEntity.length -1, 1)
        }
    }
}

/**
 * 调试-气泡框模拟创建
 * 描述：将获取到的标签数据保存到json文件中
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */
// 使用对象存储气泡框的信息（只是用一次，在最初的数据库整理的时候使用）
let buildingNameLabelData = {}
function saveBubblelBox(){
    buildingNameLabelData[window.model_name] = buildingNameLabelArr
    // 做信息记录使用，（只是用一次，在最初的数据库整理的时候使用）
    jsonFileStorage(buildingNameLabelData, 'buildingName.json', true)
}

/**
 * 调试-气泡框模拟创建
 * 描述：关闭div框，删除标签，删除数据
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已完成
 */

function exitBubblelBox(){
    // 删除所有创建的实体
    if (recordAddAllEntity.length>0){
        for (let i = 0; i < recordAddAllEntity.length; i++) {
            viewer.entities.remove(recordAddAllEntity[i])
        }
    }
    buildingNameLabelData = {}
    buildingNameLabelArr = []
    recordAddAllEntity = []
}

/**
 * 创建界面功能div弹窗
 * 描述：创建div信息弹窗并返回div数据
 * 参数：
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
function addDivBox(){
    // 创建标签
    let element = document.createElement('div')
    element.id = 'floor-data-div-id'
    element.className = 'floor-data-div'
    element.innerHTML = '<div id="floor-number" class="floor-number-class">' +
        '                       <ul id="floor-number-ul"></ul>' +// 内容区域
        '                </div>' +
        '                <div id="floor-operate" style="color: #e3e3e3">' + '</div>'// 操作按钮添加区域
    // 将标签添加到html页面中
    document.body.appendChild(element)
    return element
}

/**
 * 将数据存储为json文件
 * 描述：将所需要的数据通过此方法保存到json文件中并下载
 * 参数：data：{}对象，jsonName:json文件名称,status:是否延时
 * 返回值：
 * 备注：
 * 功能状态：已实现
 */
// 记录定时任务，当一分钟没有点击才会让其执行（只是用一次，在最初的数据库整理的时候使用）
let jsonFileStorageTime = null
const jsonFileStorage = (data, jsonName, status) =>{
    if (status){
        downloadFile(new File([JSON.stringify(data, null, 2)], jsonName, {type: 'application/json'}))
    }else {
        if (jsonFileStorageTime) {
            clearTimeout(jsonFileStorageTime)
        }
        jsonFileStorageTime = setTimeout(function(){
            downloadFile(new File([JSON.stringify(data, null, 2)], jsonName, {type: 'application/json'}))
            // 关闭坐标获取
            // closeGetPositionData()
        },60000)
    }
}
